<template>
  <div
    class="chart-line"
  >
    <ve-line
      :data="chartData"
      :colors="colors"
      :series="series"
      :x-axis="xAxis"
      :tooltip="tooltip"
      :legend="legend"
      :grid="grid"
      :legend-visible="legendVisible"
    ></ve-line>
  </div>
</template>

<script>

  export default {
    name: "chart-line",

    props: {
      list: [Array, Object],
      format: Function,
      legendVisible: Boolean,
      title: {}
    },
    data() {
      return {
        colors: ['#1e5adc','#f3d877', '#d9112f',
          '#3caf68', '#8707f7','#f58223',
          '#ca8622', '#bda29a','#6e7074',
          '#546570', '#c4ccd3','#B98947','#375FCD',
          '#B5A39C', '#C6CCD2', '#C6CCD2', '#C6CCD2',
          '#F2EFE6', '#f17c67', '#DDF0ED', '#376956',
          '#C3BED4', '#495A80', '#C7FFEC', '#E9F01D',
          '#9966CC', '#00FF80', '#00FF80', '#BDB76A',
        ],
        legend: {
          icon: 'rect',
          right: 0,
          top: 0,
          data: []
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          backgroundColor: 'rgba(255,255,255,1)',
          borderWidth: 1,
          borderColor: 'rgba(234,234,234,1)',
          padding: 10,
          extraCssText: 'box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.08);',
          textStyle: {
            color: '#000'
          },
        },
        xAxis: {
          data: []
        },
        grid: {
          top: 80,
        },
        series: [
          this.createSeries('rgba(30, 90, 220, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(243, 216, 119, 0.14)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(217, 17, 47, 0.07)','rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(60, 175, 104, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(135, 7, 247, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(245, 130, 35, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(202, 134, 34, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(202, 134, 34, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(202, 134, 34, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(202, 134, 34, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(202, 134, 34, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(188, 137, 71, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(55, 95, 205, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(181, 163, 156, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(89, 100, 110, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
          this.createSeries('rgba(198, 204, 210, 0.07)', 'rgba(255, 255, 255, 0)'),
        ],

        chartData: {
          columns: [],
          rows: []
        }
      }
    },

    watch: {
      cList(cList) {
        const columns = _.map(this.list[Object.keys(this.list)[0]], 'game');
        this.chartData.columns = ['日期', ...columns];
        if (columns) {
          _.each(columns, (column, index) => {
            this.series[index].name = column;
            this.series[index].data = _.map(cList, column);
          });
          this.xAxis.data = _.map(cList, '日期');
          this.legend.data = columns;
        }
      }
    },

    methods: {
      createSeries(startColor, endColor) {
        return {
          type: 'line',
          symbol: 'circle',
          symbolSize: 5,
          data: [],
          areaStyle: {
            origin: 'start',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: startColor // 0% 处的颜色
              }, {
                offset: 1, color: endColor // 100% 处的颜色
              }],
            }
          }
        };
      },
    },

    computed: {
      cList() {
        return _(this.list).map((value, date) => {
          return {
            '日期': date,
            ...(this.format ? this.format(value) : {[this.title]: value}),

          };
        }).orderBy(['日期'], ['asc']).value();
      }
    }
  }
</script>

<style lang="scss">
  @include b(chart-line) {
    width: 100%;
  }
</style>
